<div class="box">
	<aside class="menu">
		<p class="menu-label mb-0" onclick="$('.menu-day1').toggle()">10day</p>
		<ol class="menu-list menu-day1" style="display: none;">
			<li><a href="#day1" class="p-0">数字拼接</a></li>
			<li><a href="#day2" class="p-0">显示隐藏(三/×)</a></li>
			<li><a href="#day3" class="p-0">夕阳西下</a></li>
			<li><a href="#day4" class="p-0">放大缩小圆</a></li>
		</ol>
	</aside>
</div>
<li class="current">
	<div class="box" id="day1">
		<h4>1day</h4>
		<div class="content">
			1.渐变：background: linear-gradient(to right top,#43389F 0%,#4ec6ca 100%);<br>
			2.阴影：box-shadow: 1px 2px 10px  0px rgba(0,0,0,.3);<br>
			3.过渡（旋转）：transform: rotate(50deg);<br>
			4.转大小写：text-transform: uppercase; // 转uppercase：大写 / lowercase：小写
		</div>
		<hr >
		<div class="day day1">
			<div class="center1">
				<div class="number1">
					<div class="one-one"></div>
					<div class="one-two"></div>
					<div class="zero-one"></div>
					<div class="zero-two"></div>
				</div>
				<span class="big">Days</span>
				<span class="small">CSS Challeng</span>
			</div>
		</div>
	</div>
	<div class="box" id="day2">
		<h4>2day</h4>
		<div class="content">
			<p>1.动画 <strong class="has-text-danger-dark">animation: name duration timing-function delay iteration-count direction fill-mode play-state;</strong></p>
			<div class="button" onclick="$('.day2_hidden').toggle();">点击显示动画说明</div>
			<div class="mt-2 day2_hidden" style="display: none;">
				<div><span class="has-background-black has-text-light">① duration：完成时间</span></div>
				<div>
					<span class="has-background-black has-text-light">② timing-function：运动状态</span>
					<p class="pl-4">
						<span>linear 平均速度</span><br>
						<span>ease 默认，慢-快-慢</span><br>
						<span>ease-in 以低速开始</span><br>
						<span>ease-out 以低速结束</span><br>
						<span>ease-in-out 以低速开始和结束</span><br>
						<span>steps(int,start|end) 指定时间函数中的间隔数量(不长)</span><br>
						<span>cubic-bezier(n,n,n,n) [0,1]范围</span><br>
					</p>
				</div>
				<div><span class="has-background-black has-text-light">③ delay：延迟时间</span></div>
				<div>
					<span class="has-background-black has-text-light">④ iteration-count：播放次数</span>
					<p class="pl-4">
						<span>n 播放次数</span><br>
						<span>infinite 播放无限次</span>
					</p>
				</div>
				<div>
					<span class="has-background-black has-text-light">⑤ direction：是否交替反向循环</span>
					<p class="pl-4">
						<span>normal 正常播放</span><br>
						<span>reverse 反向播放</span><br>
						<span>alternate 奇数正向播放/偶数反向播放</span><br>
						<span>alternate-reverse 奇数反向播放/偶数正向播放</span><br>
						<span>initial</span><br>
						<span>inherit 继承父元素该属性</span><br>
					</p>
				</div>
				<div>
					<span class="has-background-black has-text-light">⑥ fill-mode：停留到动画结束的位置</span>
					<p class="pl-4">
						<span>none 默认，动画在执行前后不会应用任何样式到目标元素</span><br>
						<span>forwards 动画结束(由animation-iteration-count决定)，动画将应用此属性值</span><br>
						<span>backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。</span><br>
						<span>both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。</span><br>
						<span>initial</span><br>
						<span>inherit 从父元素继承该属性</span><br>
					</p>
				</div>
				<div>
					<span class="has-background-black has-text-light">⑦ play-state：动画运行/暂停</span>
					<p class="pl-4">
						<span>paused 指定暂停动画</span><br>
						<span>running 指定正在运行的动画</span><br>
					</p>
				</div>
			</div>
		</div>
		<hr>
		<div class="day day2">
			<div class="content1">
				<div class="lin1 no-animation"></div>
				<div class="lin2 no-animation"></div>
				<div class="lin3 no-animation"></div>
			</div>
		</div>
	</div>
	<div class="box" id="day3">
		<h4>3day</h4>
		<div class="content">
			<p>1.对元素进行裁剪：clip-path</p>
			<div class="ml-4">
				<div class="button" onclick="$('.day3_hidden').toggle();">点击显示说明</div>
				<p class="has-text-link-dark">
					矩形+圆角：<strong>inset(<shape-arg> {1,4} [round < border-radius >]?)</strong>
				</p>
				<div class="ml-4 day3_hidden" style="display: none;">
					<div>
						<span>① inset接收1~4单位值，相当于添加padding</span><br>
						<p class="pl-4">
							<span>clip-path:inset(20px);</span><br>
							<span>clip-path:inset(20px 50px 100px);</span><br>
						</p>
					</div>
					<div>
						<span>② inset接收一个round参数，参数后面接收1~4个角度值，相当于border-radius </span>
						<p class="pl-4">
							<span>clip-path:inset(20px 50px 100px 50px round 20px);</span>
							<span>clip-path: inset(20px 50px 100px 50px round 20px 10px 15px 25px);</span>
						</p>
					</div>
				</div>
				<p class="has-text-link-dark">
					圆：<strong>circle([shape-radius]?[at x y]?)</strong>
				</p>
				<div class="ml-4 day3_hidden" style="display: none;">
					shape-radius参数表示r，即圆的半径。负值无效。此处的百分比值从参考框的使用宽度和高度解析为：sqrt(width2+height2)/sqrt(2)<br>
					
					at参数定义圆的中心。如省略默认居中。x是距离左边的位置，y是距离上边的位置。当然也可以使用类似at top left 方位。<br>
					clip-path: circle(50px at 100px 40px );<br>
				</div>
				<p class="has-text-link-dark">
					椭圆：<strong>ellipse([<shape-radius> rx ry]?[at <position>]?)</strong>
				</p>
				<div class="ml-4 day3_hidden" style="display: none;">
					shape-radius参数依次表示rx和ry，椭圆的x轴和y轴半径。任一半径的负值均无效。此处的百分比值根据宽度（对于 rx 值）和使用高度（对于 ry 值）进行解析。<br>
					position 参数定义椭圆的中心。如果省略，则默认为居中。<br>
					clip-path: ellipse(50px 20px at 100px 40px );
				</div>
				<p class="has-text-link-dark">
					多边形：<strong>polygon(<fill-rule> x y,)</strong>
				</p>
				<div class="ml-4  day3_hidden" style="display: none;">
					fill-rule 类似svg的填充。 polygon可以接收多个xy坐标。<br>
					菱形：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);<br>
					x：clip-path: polygon(
						  20% 0%,
						  0% 20%,
						  30% 50%,
						  0% 80%,
						  20% 100%,
						  50% 70%,
						  80% 100%,
						  100% 80%,
						  70% 50%,
						  100% 20%,
						  80% 0%,
						  50% 30%
						);
				</div>
			</div>
			<p>2.过渡原点：transform-origin</p>
			<div class="ml-4">
				<div class="button" onclick="$('.day3_hidden2').toggle();">点击显示说明</div>
				<p><strong>transform-origin: x-axis y-axis z-axis;</strong></p>
				<div class="ml-4 day3_hidden2" style="display: none;">
					<p>一个值：<br>
						必须是 <length><percentage>，或 left, center, right, top, bottom关键字中的一个。
					</p>
					<p>两个值：<br>
						其中一个必须是<length><percentage>，或left, center, right关键字中的一个。<br>
						另一个必须是<length><percentage>，或top, center, bottom关键字中的一个。
					</p>
					<p>三个值：<br>
						前两个值和只有两个值时的用法相同。<br>
						第三个值必须是。它始终代表Z轴偏移量。<br>
					</p>
				</div>
			</div>
		</div>
		<hr >
		<div class="day day3">
			<div class="content1">
				<div class="sky"></div>
				<div class="sun"></div>
				<div class="side-left"></div>
				<div class="side-right"></div>
				<div class="shadow"></div>
				<div class="ground"></div>
			</div>
		</div>
	</div>
	<div class="box" id="day4">
		<h4>4day</h4>
		<div class="content">
			<p>1.父相子绝(居中)：relative > absolute(0000,margin:auto;) > absolute(0000,margin:auto;) </p>
			<p>2.过渡（缩放）：transform: scale(1.6);</p>
		</div>
		<hr >
		<div class="day day4">
			<div class="content1">
				<div class="dot1"></div>
				<div class="dot2"></div>
				<div class="dot3"></div>
			</div>
		</div>
	</div>
</li>
<li>100day1</li>
<li>100day2</li>
<li>100day3</li>
<li>100day4</li>
<li>100day5</li>
<script src="public/100day/100day.js" type="text/javascript" charset="utf-8"></script>